<template>
  <div style="background: #fff">
    <div class="title">
      <div>{{ title }}</div>
    </div>
    <div style="padding: 1.875rem">
      <el-form :inline="true">
        <el-form-item label="">
          <el-input
            v-model="query.name"
            placeholder="微信昵称/手机号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="是否会员">
          <el-radio v-model="query.is_vip" :label="1">非会员</el-radio>
          <el-radio v-model="query.is_vip" :label="2">会员</el-radio>
        </el-form-item>
        <el-form-item label="选择会员类别">
          <el-select v-model="query.vip_type" placeholder="请选择" clearable>
            <el-option
              v-for="item in vip_type"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择会员等级" >
          <el-select v-model="query.user_level" placeholder="请选择" clearable>
            <el-option
              v-for="item in user_level"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择团长等级">
          <el-select v-model="query.partner" placeholder="请选择" clearable>
            <el-option
              v-for="item in partner"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="选择区县">
          <el-select v-model="query.area_id" placeholder="请选择" clearable>
            <el-option
              v-for="item in area"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="日期筛选">
          <el-date-picker
            v-model="date"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="getDateRange"
            format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="getPageData(true)">查询</el-button>
          <el-button @click="reset">重置</el-button>
          <!-- <el-button type="primary" @click="showEdit(-1)">添加</el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <div ref="chart" style="width: 100%; height: 400px"></div>
    <!-- <div class="sta">
     用户总数：{{pages.total}}
    </div> -->
    <el-table :data="data" stripe style="width: 100%; margin-bottom: 1.875rem">
      <el-table-column prop="id" label="id"></el-table-column>
      <el-table-column prop="openid" label="小程序open_id"></el-table-column>
      <el-table-column prop="p_openid" label="公众号open_id"></el-table-column>
      <el-table-column prop="nick_name" label="微信昵称"></el-table-column>
      <el-table-column prop="phone" label="手机"></el-table-column>
      <el-table-column label="头像">
        <template slot-scope="scope">
          <el-image
            :src="
              cdn +
              scope.row.icon +
              '?imageView2/1/w/50/h/50/format/webp/q/75|imageslim'
            "
            style="width: 50px; height: 50px"
            :preview-src-list="[cdn + scope.row.big_icon]"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="会员类别">
        <template slot-scope="scope">
          {{
            [
              "",
              "内部会员",
              "赠送会员",
              "初始会员",
              "正式会员",
              "商家会员",
            ][scope.row.vip_type - 1]
          }}
        </template>
      </el-table-column>

      <el-table-column label="会员等级">
        <template slot-scope="scope">
          {{ ["", "青铜", "白银", "黄金", "钻石"][scope.row.user_level - 1] }}
        </template>
      </el-table-column>
      <el-table-column label="团长等级">
        <template slot-scope="scope">
          {{
            ["", "初级团长", "中级团长", "高级团长"][
              scope.row.partner - 1
            ]
          }}
        </template>
      </el-table-column>
      <!-- <el-table-column   label="累计节省"></el-table-column>
      <el-table-column   label="累计佣金"></el-table-column>
       <el-table-column   label="积分"></el-table-column>
        -->
      <!-- <el-table-column label="状态">
        <template slot-scope="scope">
         
        </template>
      </el-table-column> -->
      <el-table-column prop="created_at" label="加入时间"></el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="small" @click="showEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pages.currentPage"
      :page-size="pages.per_page"
      layout="total,prev, pager, next"
      :total="pages.total"
      style="text-align: center"
    >
    </el-pagination>

    <el-dialog title="编辑" :visible.sync="editModal" width="30%">
      <el-form :model="item">
        <el-form-item label="是否会员">
          <el-radio v-model="item.is_vip" :label="1">非会员</el-radio>
          <el-radio v-model="item.is_vip" :label="2">会员</el-radio>
        </el-form-item>
        <el-form-item label="选择会员类别" v-if="item.is_vip==2">
          <el-select v-model="item.vip_type" placeholder="请选择" clearable>
            <el-option
              v-for="i in vip_type"
              :key="i.id"
              :label="i.name"
              :value="i.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择会员等级"  v-if="item.is_vip==2">
          <el-select v-model="item.user_level" placeholder="请选择" clearable>
            <el-option
              v-for="i in user_level"
              :key="i.id"
              :label="i.name"
              :value="i.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择团长等级">
          <el-select v-model="item.partner" placeholder="请选择" clearable>
            <el-option
              v-for="i in partner"
              :key="i.id"
              :label="i.name"
              :value="i.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editModal = false">取 消</el-button>
        <el-button type="primary" @click="edit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import mixin from "../../js/mixin";

export default {
  name: "homePage",
  mixins: [mixin],
  data() {
    return {
      is_check: false,
      is_page: true,
      api_url: "user",
      one: [],
      two: [],
      item: {},
      query: {},
    };
  },
  components: {},
  mounted() {},
  created() {
    this.admin_type = localStorage.getItem("admin_type");
    console.log("账户类型：" + this.admin_type);
    this.title = this.$route.meta.title;
    this.init();
  },
  methods: {
    reset() {
      this.query = {};
      this.getData(true);
    },
    init() {
      this.getData();
      this.getTrend();
    },

    showEdit(e) {
      if (e) {
        this.item = e;
      } else {
        this.item = {};
      }
      this.editModal = true;
    },

    edit() {
      let { user_price, ...query } = this.item;
      let method = "post";
      if (this.item.id) {
        method = "put";
      }
      this.global.httpRequest(this.api_url, query, method).then((res) => {
        let { code } = res;
        if (code == 0) {
          this.editModal = false;
          this.getData();
        }
      });
    },

    getTrend() {
      this.global.httpRequest("trend/user", this.query).then((res) => {
        this.getEchartData(res);
      });
    },

    getEchartData(e) {
      const chart = this.$refs.chart;
      if (chart) {
        const myChart = this.$echarts.init(chart);
        let x = e.x;
        let y = e.y;
        let title = "新增用户概览：" + e.total;
        const option = this.getEchartOption(x, y, title);
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
    },

    // getDocument() {
    //   this.global
    //     .httpRequest("document", { user_id: this.item.id })
    //     .then((res) => {
    //       this.document = res;
    //     });
    // },
  },
};
</script>

<style scoped>
</style>
